<template>
  <div class="menu-wrapper">
    <el-form ref="sysMchForm" :model="form" :rules="rules" label-width="80px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
      </div>
      <el-form-item label="商户名称" prop="name">
        <el-col :span="12">
          <el-input v-model="form.name" />
        </el-col>
      </el-form-item>
      <el-form-item label="商户简称" prop="shortName">
        <el-col :span="12">
          <el-input v-model="form.shortName" />
        </el-col>
      </el-form-item>
<!--      <el-form-item label="商户状态" prop="status">-->
<!--        <el-col :span="12">-->
<!--          <el-select v-model="form.status" placeholder="请选择状态">-->
<!--            <el-option label="等待审核" disabled value="0" v-if="form.status == '0'"/>-->
<!--            <el-option label="审核通过" value="1" />-->
<!--            <el-option label="停止使用" value="2" />-->
<!--          </el-select>-->
<!--        </el-col>-->
<!--      </el-form-item>-->
      <el-form-item label="商户头像">
        <single-upload :singleUploadTitle='singleUploadTitle' v-model="form.logo" style="display: inline-block;margin-left: 10px"></single-upload>
      </el-form-item>
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">详细信息</span>
      </div>
      <el-form-item label="所在地" prop="areaId">
        <el-col :span="12">
          <Distpicker @selected="onSelected" :province="district.province" :city="district.city" :area="district.area" ></Distpicker>
        </el-col>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-col :span="24">
          <el-input v-model="form.address" />
        </el-col>
      </el-form-item>
      <el-form-item label="负责人"  prop="linkman">
        <el-col :span="12">
          <el-input v-model="form.linkman" />
        </el-col>
      </el-form-item>
      <el-form-item label="办公电话" prop="phone">
        <el-col :span="12">
          <el-input @mousewheel.native.prevent type="number" v-model="form.phone" />
        </el-col>
      </el-form-item>
      <el-form-item label="备注">
        <el-col :span="24">
          <el-input v-model="form.remark" />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  :loading="clicked" @click="updateSysOffice('sysMchForm')">
          完 成
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped>
  .menu-wrapper{
    margin: 15px;
  }
</style>
<script>
  import { EventBus } from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  import Distpicker from '@/components/Distpicker/Distpicker'
  import { find,update } from '@/api/sysMch'
  import { checkUserExists } from '@/api/sysUser'
  import md5 from 'js-md5';
  import SingleUpload from '@/components/Upload/singleUpload'
  export default {
    name:'sysMch-edit',
    filters: {

    },
    components: {
      Distpicker,SingleUpload
    },
    data() {
      return {
        singleUploadTitle:'100*100',
        id: '',
        clicked: false, // 按钮防双击
        district: { province: 350000, city: 350200, area: 350203 },
        form: {
          id:'',
          name: '',
          shortName: '',
          linkman: '',
          phone: '',
          remark: '',
          areaId: 440000,
          areaName: '广东省广州市海珠区',
          address: '',
          status:0,
          logo:''
        },
        rules: {
          name: [
            { required: true, message: '请输入商户名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          shortName: [
            { required: true, message: '请输入商户简称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          // status: [
          //   { required: true, message: '请输入选择商户状态', trigger: 'blur' }
          // ],
          areaId: [
            { required: true, message: '请输入选择所在地', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入联系电话', trigger: 'blur' }
          ],
          linkman: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请输入详细地址', trigger: 'blur' }
          ]
        }
      }
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
          console.log(newVal);
        if (newVal.name=='sysMch-edit' && newVal.query.id!=this.id) {
          this.getData()
        }
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData(){
        this.id = this.$route.query.id
        const _this = this
        find(this.id).then(response => {
          let sysMch = response.data.sysMch;
          _this.form.id = sysMch.id
          _this.form.name = sysMch.name
          _this.form.shortName = sysMch.shortName
          _this.form.address = sysMch.address
          _this.form.areaName = sysMch.areaName
          _this.form.areaId = sysMch.areaId
          _this.form.linkman = sysMch.linkman
          _this.form.phone = sysMch.phone
          _this.form.remark = sysMch.remark
          _this.form.logo = sysMch.logo
          _this.form.status = 0;
          _this.district = utils.decodeArea(sysMch.areaId);
        }).catch(error => {
        })
      },
      onSelected(val) {
        if(!utils.isNull(val.area) && !utils.isNull(val.area.code)){
          this.form.areaId=val.area.code;
          this.form.areaName= val.area.value;
        }
      },
      updateSysOffice(form) {
        const _this = this
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
//            _this.form.status = parseInt(_this.form.status)
            update(_this.form).then(response => {
              console.log(response)
              _this.clicked = false
                EventBus.$emit('sysMch-edit', response.data)
                _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
                  _this.$router.push({
                    path: '/sysMch/list'
                  })
                })// 关闭当前tab回到列表
            }).catch(error => {
              _this.clicked = false

            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
